<template>
  <div class="grid-content bg-purple">
    <div class="viewer-card-title">
      <div class="card-title-text">{{ title }}</div>
      <div class="card-tips">
        {{ datestr }}
        <span class="card-button">
          <slot name="button" />
        </span>
      </div>
    </div>
    <div class="viewer-card-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardPanel',
  props: {
    title: {
      type: String,
      default: ''
    },
    datestr: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-content {
  background: #ffffff;
  //min-height: 450px;
  padding: 13px 35px;

  .viewer-card-title {
    font-size: 15px;
    color: #00002a;
    letter-spacing: -0.13px;
    line-height: 18px;
    font-weight: 600;
    @include clearfix;

    .card-title-text {
      @include nowrap;
      display: inline-block;
      font-size: 15px;
      color: #00002a;
      letter-spacing: -0.13px;
      line-height: 18px;
      font-weight: 600;
      min-width: 300px;
      zoom: 1;
      width: 180px;
    }

    .card-tips {
      float: right;
      font-size: 13px;
      color: #909399;
      font-weight: normal;

      .card-button {
        display: inline-block;
        margin: 0 0 0 15px;
      }
    }
  }

  .viewer-card-content {
    margin: 10px 0 0 0;
    @include clearfix;

    .card-l-left {
      width: 230px;
      display: inline-block;
      vertical-align: top;
      float: left;

      .card-sub-title {
        line-height: 25px;

        .icon-prefix {
          margin: 0 5px 0 0;
        }
      }

      .card-tj {
        margin-top: 25px;
      }
    }

    .card-l-right {
      height: 100%;
      margin-left: 240px;
      display: block;
      vertical-align: top;
    }
  }

}

.box-card {
  margin: 12px 9px 0px 9px;

  .el-card__header {
    border: none;
    padding: 18px 20px 0 20px;

    .card-header-title {
      font-size: 15px;
      color: #00002a;
      font-weight: 600;
      @include clearfix;

      .card-tips {
        float: right;
        font-size: 13px;
        color: #909399;
        font-weight: normal;
      }
    }

    .header-border {

      &:after {
        display: inline-block;
        content: ' ';
        width: 98%;
        margin: 16px 20px 10px 0px;
        border-bottom: 1px solid #edeff3;
      }
    }

  }
}
</style>
